<template>
  <el-dialog
    :visible="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
    width="460px"
    top="25vh"
  >
    <div class="title">请输入支付密码</div>
    <div class="payPassword">
      <input
        ref="input"
        :aria-disabled="disable"
        v-model="val"
        type="password"
        :name="name"
        class="sixDigitPassword"
        @keydown="keydown"
        @contextmenu="() => false"
        @paste="() => false"
        @copy="() => false"
        @cut="() => false"
        @blur="blur"
        autocomplete="new-password"
        :maxlength="length"
        :minlength="length"
      />
      <div @focus="focus" class="sixDigitPassword" :tabindex="tabindex">
        <i :key="i" v-for="(index, i) in length">
          <b v-show="index <= val.length" />
        </i>
        <span v-show="status === MODE.FOCUS" :style="inputStyle" />
      </div>
    </div>
    <div class="bottom">
      <router-link class="link" :to="{ path: '/my/profile/payPwd#forget' }">忘记密码</router-link>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'PayPasswrod',
  props: {
    visible: {
      type: Boolean
    },
    onlyNumber: {
      type: Boolean,
      default: true
    },
    value: {
      type: String,
      default: ''
    },
    length: {
      type: Number,
      default: 6
    },
    tabindex: {
      type: Number,
      default: 0
    },
    disable: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: 'payPassword'
    }
  },
  data() {
    return {
      status: '',
      val: '',
      step: 38,
      MODE: {
        FOCUS: 1,
        BLUR: 2,
        COMPLETE: 3
      }
    }
  },
  computed: {
    inputStyle() {
      return {
        width: `38px`,
        left: `${this.val.length * this.step}px`
      }
    }
  },
  watch: {
    val(val) {
      this.$emit('input', val)
      if (this.status === this.MODE.BLUR) {
        return
      }
      if (val.length === this.length) {
        this.status = this.MODE.COMPLETE
        setTimeout(() => {
          this.$emit('complete')
        }, 300)
      } else {
        this.status = this.MODE.FOCUS
      }
    },
    value(value) {
      this.updateVal(value)
    }
  },
  mounted() {
    this.status = this.MODE.BLUR
    this.updateVal(this.value)
  },
  methods: {
    keydown(e) {
      if (!this.onlyNumber) {
        return
      }
      const key = e.charCode || e.keyCode || 0
      if (
        !(
          key == 8 ||
          key == 9 ||
          key == 46 ||
          key == 110 ||
          key == 190 ||
          (key >= 35 && key <= 40) ||
          (key >= 48 && key <= 57) ||
          (key >= 96 && key <= 105)
        )
      ) {
        e.preventDefault()
      }
    },
    updateVal(value) {
      if (this.val === value || value.length > this.length) {
        return
      }
      this.val = value
    },
    clear() {
      this.val = ''
      this.$emit('clear')
    },
    blur() {
      this.status = this.MODE.BLUR
      this.$emit('blur')
    },
    focus(e) {
      if (this.disable) {
        if (e) {
          e.preventDefault()
          e.stopPropagation()
        }
        return false
      }
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
      if (this.val.length === this.length) {
        this.status = this.MODE.COMPLETE
      } else {
        this.status = this.MODE.FOCUS
      }
      this.$emit('focus')
    },
    // 关闭
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding-top: 10px;
}
.title {
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  color: #303133;
  margin-bottom: 25px;
}
.payPassword {
  display: flex;
  justify-content: center;
  position: relative;
  input.sixDigitPassword {
    position: absolute;
    color: #fff;
    opacity: 0;
    width: 1px;
    height: 1px;
    font-size: 1px;
    left: 0;
    box-sizing: content-box;
    -webkit-user-select: initial; /* 取消禁用选择页面元素 */
    outline: none;
    margin-left: -9999px;
  }
  div.sixDigitPassword {
    display: flex;
    cursor: text;
    background: #fff;
    outline: none;
    position: relative;
    border: 1px solid #cccccc;
    border-radius: 2px;
    box-sizing: content-box;
    i {
      height: 38px;
      width: 37px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #cccccc;
      &:first-child {
        border-color: transparent;
      }
    }
    b {
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background: #303133;
    }
    span {
      position: absolute;
      display: block;
      left: 0px;
      top: -1px;
      height: 38px;
      border: 1px solid rgba(82, 168, 236, 0.8);
      border-radius: 2px;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
      background: url(~@assets/images/public/l.gif) no-repeat center center;
      background-size: auto 15px;
    }
  }
}
.bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  .link {
    height: 26px;
    font-size: 13px;
    font-weight: 400;
    color: #5191ff;
    text-decoration: none;
  }
}
</style>
